<template>
  <el-container :data-theme='basecolor'>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <navs></navs>
      <el-main :class="{'active':isActive}">
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-footer>
    </el-footer>
  </el-container>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import navs from './../components/header/navs.vue'
import Header from './../components/header/Header.vue'
export default {
  name: 'index',
  components: { navs, Header },
  data () {
    return {
      contents: []
    }
  },
  computed: {
    ...mapState({
      tokens: state => state.user.username,
      basecolor: state => state.app.basecolor,
      isActive: state => state.app.sidebar.opened
    })
  },
  methods: {
    ...mapMutations({
      bindxh: 'BIND_XH'
    })
  },
  mounted () {
    // console.log(this.token)
  }
}
</script>

<style  lang="less" >
@import "../assets/css/theme.css";
.is-vertical,
.container {
  height: 100%;
}

.el-header {
  padding: 0px;
}
</style>
